<template>
  <view>
    <z-paging
      ref="paging"
      style="background-color: #eeeeef"
      v-model="itemList"
      @query="queryList"
      :fixed="true"
      :auto="false"
      :auto-show-back-to-top="true"
      :empty-view-img="`${getImageUrl('empty.png')} `"
      empty-view-text="暂无数据~"
      :empty-view-img-style="imgStyle"
    >
      <view slot="top">
        <u-navbar title="联盟商家" title-size="36" :border-bottom="false">
          <view class="slot-wrap">
            <view style="width: 690rpx; overflow: auto">
              <view class="location dis-flex flex-y-center" @click="onCity">
                <u-icon
                  class="cate-icon"
                  style=""
                  name="/static/dw-g.png"
                  size="30rpx"
                  mode=""
                ></u-icon>
                <text class="address u-line-1">{{
                  address.cityName ? subCity(address.cityName) : '选择'
                }}</text>
                <u-icon
                  style="margin-left: 10rpx"
                  name="arrow-down"
                  color="#333333"
                  size="26"
                ></u-icon>
              </view>
            </view>
          </view>
        </u-navbar>
        <view class="searchView" @click="onSearch">
          <u-search
            placeholder="搜索所需商品"
            height="64"
            :show-action="true"
            style="width: 100%"
          ></u-search>
        </view>
      </view>

      <!-- <view class="card service dis-flex flex-y-between">
				<view class="item" @click="routeToStore(service)" v-for="(service,index) in categoryList" :key="index">
					<u-image :src="service.picUrl" width="64rpx" height="64rpx"></u-image>
					<view class="name"> {{service.title}}</view>
				</view>
			</view>
			<view class="hot">推荐商家</view> -->

      <view class="goods_area">
        <StoreBox :itemList="itemList"></StoreBox>
      </view>
    </z-paging>
  </view>
</template>

<script>
import Vue from 'vue'
import StoreBox from '@/components/store_box.vue'
export default {
  components: {
    StoreBox
  },
  data() {
    return {
      categoryList: [],
      itemList: [],
      imgStyle: {
        width: '12rem'
      },
      address: {
        cityName: '',
        cityCode: ''
      }
    }
  },
  onLoad() {
    this.address = uni.getStorageSync('address') || {
      cityName: '',
      cityCode: ''
    }
    this.$u.get('/app-api/cms/qlink/list?identify=lianmeng_shop_caitegory').then((res) => {
      this.categoryList = res.data
      this.queryList()
    })
  },
  methods: {
    subCity(city) {
      return city.length > 3 ? city.substr(0, 3) + '...' : city
    },
    onCity() {
      uni.$on('selectAddress', (res) => {
        console.log('selectAddress=' + JSON.stringify(res))
        this.address = res
        this.queryList()
        uni.$off('selectAddress')
      })
      uni.navigateTo({
        url: '/other/select-city/select-city'
      })
    },
    routeTo(url) {
      uni.navigateTo({
        url: url
      })
    },
    routeToStore(item) {
      if (item.linkUrl) {
        uni.navigateTo({
          url: item.linkUrl
        })
      } else {
        uni.navigateTo({
          url: '/lianmeng/store-list-waimai'
        })
      }
    },
    queryList(pageNo = 1, pageSize = 10) {
      if (pageNo === 1) {
        this.itemList = []
      }
      this.$u.api
        .getStoreList({
          pageNo,
          pageSize,
          o2o: true,
          cityCode: this.address?.cityCode || '',
          recommend: 1
        })
        .then((res) => {
          //this.itemList[this.current] = res.data.list
          this.$refs.paging.complete(res.data.list)
        })
    }
  }
}
</script>

<style scoped lang="scss">
page {
  background-color: #f0f0f0;
}

.cate-icon {
  vertical-align: middle;
  margin-right: 10rpx;
}

.address {
  font-size: 30rpx;
}

.searchView {
  padding: 13rpx 20rpx;
  margin-bottom: 15rpx;
  background-color: #fff;
}

.card {
  margin: 20rpx;
  background-color: #fff;
  border-radius: 10rpx;
}

.service {
  padding: 36rpx 0 20rpx 0;
  height: 180rpx;

  .item {
    flex: 1;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-flow: column;

    .name {
      font-size: 26rpx;
      color: #333333;
    }
  }
}

.goods_area {
  .goods_box {
    /* width: 100%; */
    background: #ffffff;
    border-radius: 10rpx;
    padding: 20rpx;
    margin: 0 20rpx;
    margin-bottom: 20rpx;
  }

  .store-image {
    position: relative;
  }

  .store-label {
    position: absolute;
    top: 8rpx;
    right: 8rpx;
    width: 60rpx;
    height: 30rpx;
    background: #ed624f;
    border-radius: 10rpx;
    font-size: 20rpx;
    color: #ffffff;
    text-align: center;
    line-height: 30rpx;
  }

  .goods_title {
    font-size: 30rpx;
    color: #333333;
  }

  .laba {
    font-size: 20rpx;
    color: #999999;
    padding: 30rpx 0 10rpx 0;
  }

  .goods_price {
    font-size: 25rpx;
    color: red;
    display: flex;
  }

  .price_tip {
    font-size: 35rpx;
  }

  .sales-volume1 {
    color: #999999;
  }

  .price_main {
    font-size: 36rpx;
  }

  .price_dot {
    align-self: flex-end;
  }

  .goods_tip {
    text {
      width: auto;
      // height: 40rpx;
      border-radius: 20rpx;
      border: 1px solid #fa453c;
      // line-height: 40rpx;
      text-align: center;
      font-size: 20rpx;
      color: #fa453c;
      padding: 2rpx 20rpx;
    }
  }

  .goods_old_price {
    color: #89898a;
  }

  .storeName {
    font-size: 26rpx;
    font-weight: 400;
    color: #ffffff;
    line-height: 98px;
    margin-left: 10rpx;
    margin-right: 10rpx;
    margin-top: -4rpx;
  }

  .cabinetName {
    height: 30rpx;
    background: #ffffff50;
    border-radius: 5rpx;
    padding: 0px 10rpx;
    font-size: 22rpx;
    font-weight: 400;
    color: #ffffff;
    margin-right: 10rpx;
  }

  .goods-star {
    font-size: 30rpx;
    color: #333333;
    margin-left: 8rpx;
  }

  .sale-item {
    font-size: 24rpx;
    color: #666666;
    /* margin-right: 50rpx; */
  }
}

.hot {
  font-weight: 600;
  font-size: 32rpx;
  color: #333333;
  margin-bottom: 30rpx;
  padding-top: 10rpx;
  margin-left: 20rpx;
}
</style>
